<script setup lang="ts">
import type { ILoginForm } from '@/api/common'
import { ref } from 'vue'
import { useAppEnv } from '@/composables/app'
import { useAppStore } from '@/stores/app'
import { isMpWeixin } from '@/utils/common'
import { Toast } from '@/utils/toast'

const appStore = useAppStore()
const redirectRoute = ref('')

const { VITE_APP_TITLE, VITE_APP_LOGO } = useAppEnv()

const captcha = ref({
  enabled: false,
  image: '',
})
const data = ref<ILoginForm>({
  username: '20220808174',
  password: '177814',
})
const agreePrivacy = ref(true)

onLoad((option) => {
  captcha.value.enabled && refreshCaptcha()
  if (option.redirect) {
    redirectRoute.value = option.redirect
  }
})

// 账号密码登录
async function handleAccountLogin() {
  if (!agreePrivacy.value) {
    Toast.error('请阅读同意协议')
    return
  }
  // 表单验证
  if (!data.value.username) {
    Toast.error('请输入用户名')
    return
  }
  if (!data.value.password) {
    Toast.error('请输入密码')
    return
  }
  if (captcha.value.enabled && !data.value.captcha) {
    Toast.error('请输入验证码')
    return
  }
  // 执行登录
  appStore.login(data.value)
}

// 微信登录
async function handleWechatLogin(e: any) {
  if (!isMpWeixin) {
    Toast.info('请在微信小程序中使用此功能')
    return
  }

  // 验证是否同意隐私协议
  if (!agreePrivacy.value) {
    Toast.error('请先阅读并同意用户协议和隐私政策')
    return
  }

  console.log('e', e)

  const code = e?.code
  if (!code) {
    Toast.info('用户取消登录')
  }
  // 微信登录
}

// 刷新验证码
function refreshCaptcha() {
  // 获取验证码

}

// 处理协议点击
function handleAgreement(type: 'user' | 'privacy') {
  const title = type === 'user' ? '用户协议' : '隐私政策'
  Toast.info(`查看${title}`)
  // 跳转到协议页面
  uni.navigateTo({
    url: `/pages/agreement/${type}`,
  })
}
</script>

<template>
  <view class="login-container">
    <!-- 背景装饰元素 -->
    <view class="bg-decoration bg-circle-1" />
    <view class="bg-decoration bg-circle-2" />
    <view class="bg-decoration bg-circle-3" />

    <view class="login-header">
      <image class="login-logo" :src="VITE_APP_LOGO" mode="aspectFit" />
      <view class="login-title">
        {{ VITE_APP_TITLE }}
      </view>
    </view>
    <view class="login-form">
      <view class="welcome-text">
        欢迎登录
      </view>
      <view class="login-desc">
        请输入您的账号和密码
      </view>
      <view class="login-input-group">
        <view class="input-wrapper">
          <sar-input
            v-model="data.username"
            inlaid
            placeholder="请输入用户名"
            clearable
            class="login-input"

            required
          />
          <view class="input-bottom-line" />
        </view>
        <view class="input-wrapper">
          <sar-input
            v-model="data.password"
            placeholder="请输入密码"
            inlaid
            class="login-input"
            clearable
            required
            type="password"
            show-password
          >
            <template #append />
          </sar-input>
          <view class="input-bottom-line" />
        </view>
        <!-- 验证码区域 -->
        <view v-if="captcha.enabled" class="input-wrapper captcha-wrapper">
          <sar-input
            v-model="data.captcha"
            prefix-icon="secured"
            placeholder="请输入验证码"
            clearable
            class="login-input captcha-input"
            :border="false"
            required
          >
            <template #append>
              <image
                class="captcha-image"
                :src="`data:image/gif;base64,${captcha.image}`"
                mode="aspectFit"
                @click="refreshCaptcha"
              />
            </template>
          </sar-input>
          <view class="input-bottom-line" />
        </view>
      </view>
      <!-- 登录按钮组 -->
      <view>
        <!-- 账号密码登录按钮 -->
        <sar-button theme="primary" size="small" @click="handleAccountLogin">
          <sar-icon name="right" size="18px" />
          登录
        </sar-button>
        <!-- 微信小程序一键登录按钮 -->
        <!-- #ifdef MP-WEIXIN -->
        <sar-divider root-class="text-24rpx">
          或
        </sar-divider>

        <sar-button theme="success" size="small" type="pale" open-type="getPhoneNumber" @getphonenumber="handleWechatLogin">
          微信一键登录
        </sar-button>
        <!-- #endif -->
      </view>
    </view>
    <!-- 隐私协议勾选 -->
    <view class="my-30rpx mb-40rpx mt-30rpx flex justify-center">
      <sar-checkbox v-model="agreePrivacy">
        <view class="agreement-text text-26rpx color-#666666 leading-28rpx">
          我已阅读并同意
          <text class="agreement-link" @click.stop="handleAgreement('user')">
            《用户协议》
          </text>
          和
          <text class="agreement-link" @click.stop="handleAgreement('privacy')">
            《隐私政策》
          </text>
        </view>
      </sar-checkbox>
    </view>
    <view class="mt-auto py-50rpx" />
  </view>
</template>

<style lang="scss" scoped>
/* 验证码输入框样式 */
.captcha-wrapper {
  .captcha-input {
    :deep(.sar-input__suffix) {
      margin-right: 0;
      padding-right: 0;
    }
  }

  .captcha-image {
    width: 100px;
    height: 36px;
    margin-left: 10px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
      pointer-events: none;
    }

    &:active {
      opacity: 0.8;
      transform: scale(0.96);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
  }
}

.login-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 70rpx;
  background-color: #ffffff;
  background-image: linear-gradient(135deg, rgba(25, 137, 250, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
  position: relative;
  overflow: hidden;
}

/* 背景装饰元素 */
.bg-decoration {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(25, 137, 250, 0.05), rgba(25, 137, 250, 0.1));
  z-index: 0;
  pointer-events: none;
}

.bg-circle-1 {
  width: 500rpx;
  height: 500rpx;
  top: -200rpx;
  right: -200rpx;
  opacity: 0.6;
}

.bg-circle-2 {
  width: 400rpx;
  height: 400rpx;
  bottom: 10%;
  left: -200rpx;
  opacity: 0.4;
}

.bg-circle-3 {
  width: 300rpx;
  height: 300rpx;
  bottom: -100rpx;
  right: 10%;
  opacity: 0.3;
  background: linear-gradient(135deg, rgba(7, 193, 96, 0.05), rgba(7, 193, 96, 0.1));
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 120rpx;
  animation: fadeInDown 0.8s ease-out;

  .login-logo {
    width: 200rpx;
    height: 200rpx;
    border-radius: 36rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
      box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.1);
    }
  }

  .login-title {
    margin-top: 30rpx;
    font-size: 46rpx;
    font-weight: bold;
    color: #333333;
    letter-spacing: 3rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
  }
}

.login-form {
  flex: 1;
  margin-top: 70rpx;
  animation: fadeIn 0.8s ease-out 0.2s both;

  .welcome-text {
    margin-bottom: 16rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #333333;
    text-align: center;
    letter-spacing: 1rpx;
  }

  .login-desc {
    margin-bottom: 70rpx;
    font-size: 28rpx;
    color: #888888;
    text-align: center;
  }

  .login-input-group {
    margin-bottom: 60rpx;
    position: relative;
    z-index: 1;

    .input-wrapper {
      position: relative;
      margin-bottom: 50rpx;
      transition: all 0.3s ease;
      border-radius: 16rpx;
      // overflow: hidden;

      &:last-child {
        margin-bottom: 0;
      }

      .login-input {
        padding: 12rpx 20rpx;
        background-color: rgba(245, 247, 250, 0.7);
        border-radius: 16rpx;
        transition: all 0.3s ease;
        &:focus-within {
          background-color: rgba(245, 247, 250, 0.95);
          box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
          transform: translateY(-3rpx);
        }
      }

      .input-bottom-line {
        position: absolute;
        bottom: -2rpx;
        left: 5%;
        width: 90%;
        height: 2rpx;
        background: linear-gradient(to right, transparent, var(--wot-color-theme, #1989fa), transparent);
        transition: transform 0.4s ease;
        transform: scaleX(0);
        opacity: 0.8;
      }

      &:focus-within .input-bottom-line {
        transform: scaleX(1);
      }

      .input-icon {
        margin-right: 16rpx;
        color: #666666;
        transition: color 0.3s ease;
      }

      &:focus-within .input-icon {
        color: var(--wot-color-theme, #1989fa);
      }
    }
  }
}

.agreement-link {
  padding: 0 4rpx;
  font-weight: 500;
  color: var(--wot-color-theme, #1989fa);
  transition: all 0.3s ease;

  &:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

/* 添加动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
